﻿@{
    ViewData["Title"] = "AppPlans";
}

<div class="normalheader transition animated fadeIn">
    <div class="hpanel">
        <div class="panel-body">
            <a class="small-header-action" href="">
                <div class="clip-header">
                    <i class="fa fa-arrow-up"></i>
                </div>
            </a>

            <div id="hbreadcrumb" class="pull-right m-t-lg">
                <ol class="hbreadcrumb breadcrumb">
                    <li><a href="index.html">Dashboard</a></li>
                    <li>
                        <span>App views</span>
                    </li>
                    <li class="active">
                        <span>App plans</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                App plans
            </h2>
            <small>Present pricing option for your app</small>
        </div>
    </div>
</div>

<div class="content animate-panel">

    <div class="row">
        <div class="col-lg-12">

            <div class="text-center m-b-xl">
                <h3>Best pricing for your app</h3>

                <p>
                    Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' and web page editors now use Lorem Ipsum as their default model text, will uncover many web sites still in their infancy.
                </p>
            </div>

            <div class="row">
                <div class="col-sm-3">
                    <div class="hpanel plan-box hyellow">
                        <div class="panel-heading hbuilt text-center">
                            <h4 class="font-bold">Basic plan</h4>
                        </div>
                        <div class="panel-body">
                            <p class="text-muted">
                                Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus.
                            </p>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <td>
                                            Features
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Dashboard
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Project view
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Contacts
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-square-o"></i> Calendar
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-square-o"></i> AngularJS version
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-square-o"></i> Meteor version
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-square-o"></i> Support
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <p class="text-muted">
                                Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus.
                            </p>

                            <h3 class="font-bold">
                                $10/month
                            </h3>
                            <a href="#" class="btn btn-warning btn-sm m-t-xs">Select plan</a>
                        </div>
                    </div>
                </div>

                <div class="col-sm-3">
                    <div class="hpanel plan-box hgreen active">
                        <div class="panel-heading hbuilt text-center">
                            <h4 class="font-bold">Standard plan</h4>
                        </div>
                        <div class="panel-body">
                            <p class="text-muted">
                                Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus.
                            </p>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <td>
                                            Features
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Dashboard
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Project view
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Contacts
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Calendar
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> AngularJS version
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-square-o"></i> Meteor version
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-square-o"></i> Support
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <p class="text-muted">
                                Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus.
                            </p>

                            <h3 class="font-bold">
                                $20/month
                            </h3>
                            <a href="#" class="btn btn-success btn-sm m-t-xs">Select plan</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="hpanel plan-box hblue">
                        <div class="panel-heading hbuilt text-center">
                            <h4 class="font-bold">Premium plan</h4>
                        </div>
                        <div class="panel-body">
                            <p class="text-muted">
                                Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus.
                            </p>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <td>
                                            Features
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Dashboard
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Project view
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Contacts
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Calendar
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> AngularJS version
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Meteor version
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-square-o"></i> Support
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <p class="text-muted">
                                Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus.
                            </p>

                            <h3 class="font-bold">
                                $30/month
                            </h3>
                            <a href="#" class="btn btn-info btn-sm m-t-xs">Select plan</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="hpanel plan-box hred">
                        <div class="panel-heading hbuilt text-center">
                            <h4 class="font-bold">Prestige plan</h4>
                        </div>
                        <div class="panel-body">
                            <p class="text-muted">
                                Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus.
                            </p>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <td>
                                            Features
                                        </td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Dashboard
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Project view
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Contacts
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Calendar
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> AngularJS version
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Meteor version
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <i class="fa fa-check-square-o"></i> Support
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <p class="text-muted">
                                Lorem ipsum dolor sit amet, illum fastidii dissentias quo ne. Sea ne sint animal iisque, nam an soluta sensibus.
                            </p>

                            <h3 class="font-bold">
                                $40/month
                            </h3>
                            <a href="#" class="btn btn-danger btn-sm m-t-xs">Select plan</a>
                        </div>
                    </div>
                </div>


            </div>

            <hr class="m-b-xl" />

            <div class="row">
                <div class="col-sm-3">
                    <div class="hpanel plan-box">
                        <div class="panel-heading hbuilt text-center">
                            <h4 class="font-bold">Basic plan</h4>
                        </div>
                        <div class="panel-body text-center">
                            <i class="pe pe-7s-cup big-icon text-warning"></i>
                            <h4 class="font-bold">
                                $10/month
                            </h4>

                            <p class="text-muted">
                                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                            </p>
                            <a href="#" class="btn btn-warning btn-sm">Select basic plan</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="hpanel plan-box active">
                        <div class="panel-heading hbuilt text-center">
                            <h4 class="font-bold">Standard plan</h4>
                        </div>
                        <div class="panel-body text-center">
                            <i class="pe pe-7s-science big-icon text-success"></i>
                            <h4 class="font-bold">
                                $20/month
                            </h4>

                            <p class="text-muted">
                                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                            </p>
                            <a href="#" class="btn btn-success btn-sm">Select standard plan</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="hpanel plan-box">
                        <div class="panel-heading hbuilt text-center">
                            <h4 class="font-bold">Premium plan</h4>
                        </div>
                        <div class="panel-body text-center">
                            <i class="pe pe-7s-refresh-cloud big-icon text-info"></i>
                            <h4 class="font-bold">
                                $30/month
                            </h4>

                            <p class="text-muted">
                                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                            </p>
                            <a href="#" class="btn btn-info btn-sm">Select premium plan</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="hpanel plan-box">
                        <div class="panel-heading hbuilt text-center">
                            <h4 class="font-bold">Prestige plan</h4>
                        </div>
                        <div class="panel-body text-center">
                            <i class="pe pe-7s-server big-icon text-danger"></i>
                            <h4 class="font-bold">
                                $40/month
                            </h4>

                            <p class="text-muted">
                                There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.
                            </p>
                            <a href="#" class="btn btn-danger btn-sm">Select prestige plan</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>


</div>
